<template>
    <div class="wholeContainer">
        <div class="introPart">
            <div>
                狮论坛<br>
            </div>
            <div class="content">
                满足你的倾诉需求!
            </div>
        </div>
        <div class="LoginBox">
            <img class="logoBox" src="../assets/logo.png" alt="" mode="widthFix">
            <div class="loginTitle">Be Happy in Lion Forum</div>
            <div class="inputBox">
                <img src="../assets/login.png" alt="" mode="heightFix">
                <input v-model.trim="nickName" type="text" class="inputPart" placeholder="请输入用户名">
            </div>
            <div class="inputBox">
                <img src="../assets/password.png" alt="" mode="heightFix">
                <input v-model="password" type="password" class="inputPart" placeholder="请输入密码">
            </div>              
            <button @click="registerGo" class="loginBtn">注 册</button>
            <div class="loginRegister">已有账号，<router-link class="goClass" to="/Login">马上登录</router-link></div>
        </div>
       
    </div>
</template>

<script>
import store from '../store/index.js'
export default {
    name: 'Register',
    data(){
        return{
            nickName:'',
            password:'',
        }
    },
    mounted(){
        console.log(store.state.globalUrl)

    },
    methods: {
        registerGo(){
            let that = this;
            if(this.nickName==''||this.password==''){
                this.$message({
                    message: '请输入用户名和密码',
                    type: 'warning'
                })
            }else{
                this.$axios({
                    method: "post",
                    url: '/api/users/register',
                    data: {
                        nickname: this.nickName,
                        password: this.md5(this.password),
                        userType: 2,
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.data.code==0){
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        })
                    }else if(res.data.code==1){
                        this.$router.push({
                            path:'/Login',
                            name:'login',
                            params:{
                                nickName:that.nickName
                            }
                        })
                    }
                })
            }
        },
    },
}
</script>

<style scoped>
    .wholeContainer{
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../assets/loginbg.jpg');
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .introPart{
        margin-left: 15%;
        margin-right: -13%;
        font-size: 4em;
        width: 30%;
        color: white;
    }
    .content{
        font-size: 0.5em;
    }
    .LoginBox{
        background-color: #4d4d4d;
        width: 25%;
        height: 50%;
        margin-left:20.5%;
        margin-right: 15%;
        margin-top: -6%;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 10px;
    }
    .logoBox{
        margin-top: -7%;
        width: 80%;
        margin-left: 10%;
    }
    .loginTitle{
        color: white;
        font-size: 1em;
        height: 5%;
        margin-top: -10%;
        margin-bottom: 8%;
    }
    .inputBox{
        /* background-color: aqua; */
        width: 90%;
        margin-left: 15%;
        margin-top: 4%;
        height: 8%;
        display: flex;
    }
    .inputPart{
        padding-left: 5px;
        width: 60%;
        height: 95%;
        line-height: 95%;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 1em;
        background-color: #4d4d4d;
        margin-left: 1.5%;
    }
    .inputBox img{
        height: 100%;
    }
    .loginBtn{
        background-color: #4d4d4d;
        margin: 10px;
        padding: 10px 0;
        width: 64%;
        margin-left: 16%;
        margin-top: 8%;
        text-align: center;
        color: white;            
        border-radius: 50px;
        border: 1.5px solid white;
        font-size: 1em;
        display: block;
    }
    .loginBtn:hover {         
        color: pink;
        border: 1.5px solid pink;
    }
    .loginRegister{
        color: white;
        font-size: 0.9em;
        margin-top: 2%;
    }
    .goClass{
        color: pink;
    }   
    .infoConatiner{
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .info{
        position: fixed;
        width: 20%;
        height: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: rgba(0,0,0,0.8);
        color: white;
        border-radius: 15px;
        text-align: center;
    }
    .info_title{
        font-size: 2em;
        margin-top: 15%;
        width: 100%;
    }
    .info_msg{
        font-size: 1.4em;
        margin-top: 20%;
        padding-left: 10%;
        padding-right: 10%;
    }
    .info_btn{
        position: absolute;
        bottom:0;
        padding:5% 0;
        text-align: center;
        margin-top: 60%;
        border-radius: 15px;
        width: 100%;
        color: white;
        font-size: 1.2em;
        border-top: 1px solid white;
    }
    .info_btn:hover{
        background-color: rgba(255,255,255,0.2);
    }
</style>
